/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-22 18:21:01
 * @LastEditors: 18163104359 2205227953@qq.com
 * @LastEditTime: 2024-01-23 15:44:59
 * @FilePath: /umi/src/layouts/components/Header/index.jsx
 * @Description: 底部导航
 */
import React, { useState, useEffect } from "react";
import { connect, history } from "umi";
import { isHttp } from "@/utils/validate";
import { Menu, Button, Layout } from "antd";
import AppCongfg from "../AppConfig/index";
import BreadcrumbPage from "../BreadcrumbPage/index";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import "./index.less";
const { Header } = Layout;
const NavigationMenu = (props) => {
  const { appConfig, dispatch } = props;

  const handleSelect = (obj) => {
    let rootKey = obj.key;
    dispatch({ type: "appConfig/setNavigationKey", payload: rootKey });

    const route = appConfig.navigationMenu.find((item) => item.path === rootKey);
    if (isHttp(rootKey)) {
      // http(s):// 路径新窗口打开
      window.open(rootKey, "_blank");
    } else if (!route || !route.comm) {
      // 没有子路由路径内部打开
      history.push(rootKey);
      dispatch({
        type: "appConfig/setCollapsed",
        payload: true,
      });
      console.log("没有子路由路径内部打开,此处有bug");
    } else {
      if (route.comm.length > 0) {
        dispatch({
          type: "appConfig/setCollapsed",
          payload: false,
        });
        // 如果是首页不执行一下方法
        if (obj.key == "/index") return;
        dispatch({
          type: "appConfig/setSiderMenu",
          payload: route.comm,
        });
      }
    }
  };
  // appConfig.menuType != "3"
  // 顶部显示菜单
  const topMenus = () => {
    let topMenus = [];

    appConfig.navigationMenu.map((menu) => {
      if (appConfig.menuType == "3") {
        topMenus.push(menu);
      } else {
        if (menu.children) {
          menu.comm = menu.children;

          delete menu.children;
        }
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/" || menu.menuType == "C") {
            topMenus.push(menu.comm[0]);
          } else {
            topMenus.push(menu);
          }
        }
      }
    });
    // setNavigationMenu(topMenus);
    return topMenus;
  };

  return (
    <Header
      style={{ padding: 0, display: "flex", height: "3.125rem" }}
      className="NavigationMenuBox"
    >
      <div className="flex">
        {appConfig.menuType != "3" ? (
          <Button
            type="text"
            icon={appConfig.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => {
              dispatch({
                type: "appConfig/setCollapsed",
                payload: !appConfig.collapsed,
              });
            }}
            style={{
              width: 64,
              color: "#000",
            }}
          />
        ) : (
          <div></div>
        )}
        {appConfig.menuType != "2" ? (
          <Menu
            style={{
              height: "3.125rem",
              lineHeight: "3.125rem",
            }}
            mode="horizontal"
            items={topMenus()}
            selectedKeys={appConfig.navigationKey}
            onClick={handleSelect}
          />
        ) : (
          <BreadcrumbPage />
        )}
      </div>
      <AppCongfg />
    </Header>
  );
};
export default connect((state) => ({
  appConfig: state.appConfig,
}))(NavigationMenu);
